<template>
    <div>
        <v-header>
            <div slot="right" class="right">
                <select v-model="selected">
                    <option value="全部">全部</option>
                    <option value="支出">支出</option>
                    <option value="收入">收入</option>
                </select>
            </div>
        </v-header>
        <ul>
            <li v-for="(item,index) in SZdata" :key="index">
                <div class="listLeft">
                    <h2 v-show="item.TYPE == 0 && item.SZ > 0" style="color:#259E26;">盈亏
                        <span>{{item.SZ}}</span>
                    </h2>
                    <h2 v-show="item.TYPE == 0  && item.SZ < 0" style="color:red;">盈亏
                        <span>{{item.SZ}}</span>
                    </h2>
                    <h2 v-show="item.TYPE == 1">充值
                        <span>{{item.SZ}}</span>
                    </h2>
                    <h2 v-show="item.TYPE == 2">解冻保证金
                        <span>{{item.SZ}}</span>
                    </h2>
                    <h2 v-show="item.TYPE == 3" style="color:red;">冻结保证金
                        <span>{{item.SZ}}</span>
                    </h2>
                    <span>{{item.RQ}}</span>
                    <span>申请号：{{item.HTH}}</span>
                </div>
                <div class="listRight">
                    <span>产品：
                        <span>{{item.CP}}</span>
                    </span>
                    <span>余额：{{item.YE}}</span>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import vHeader from "../../Common/vHeader";
export default {
  data() {
    return {
      selected: "全部",
      SZdata: [
        {
          TYPE: 0,
          SZ: "-234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 1,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "-234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 2,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 3,
          SZ: "-234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 2,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 1,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 3,
          SZ: "-234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 3,
          SZ: "-234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 1,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "-234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 2,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "-234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 2,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 1,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 0,
          SZ: "234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        },
        {
          TYPE: 3,
          SZ: "-234.00",
          RQ: "08-03  20:37",
          HTH: "CZ1710141704263923",
          CP: "比特币BTC",
          YE: "82,900.00"
        }
      ],
      temp: ""
    };
  },
  methods: {},
  watch: {
    selected(newValue, oldValue) {
      // 第一次一定会执行
      if (oldValue == "全部") {
        // 备份
        this.temp = this.SZdata;
      }
      // 三选一
      if (newValue == "全部") {
        this.SZdata = this.temp;
      } else if (newValue == "支出") {
        this.SZdata = this.temp.filter(item => item.SZ < 0);
      } else if (newValue == "收入") {
        this.SZdata = this.temp.filter(item => item.SZ > 0);
      }
    }
  },
  components: {
    vHeader
  }
};
</script>

<style scoped>
.right {
  display: flex;
  justify-content: flex-end;
  line-height: 3rem;
  height: 3rem;
}
.right > select {
  border: none;
  color: #ffffff;
  font-size: 1.1rem;
  background-color: transparent;
}
.right > select > option {
  color: #000;
}
ul {
  list-style: none;
  width: 90%;
  margin: 0 auto;
}
ul > li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f0f0f2;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #aaaaaa;
  font-size: 0.8rem;
}
ul .listLeft,
ul .listRight {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
ul .listLeft h2 {
  color: #259e26;
}
ul .listLeft h2 > span {
  font-size: 0.8rem;
}
</style>